import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Timeline, Button, Space } from 'antd';
import { stage, stage_status } from '@/common/contact'
import { hexToRGBA } from '@/utils/utils'
import TableDataBlock from '@/components/TableDataBlock';
const SetForm = (props) => {
  const { dispatch, visible = {}, id, hideFlag: showHide } = props;
  const [list, setList] = useState([])
  useEffect(() => {
    fetchData()
  }, [])
  const fetchData = () => {
    dispatch({
      type: 'subscriber/fetchListAllUserStage',
      payload: {
        organizationUserId: id,
        hideFlag: showHide
      },
      callback: (e = []) => {
        setList(e)
      },
    });
  }
  const hideFetch = (hideFlag, o) => {
    dispatch({
      type: 'weCom/fakeSetStageHideFlag',
      payload: {
        hideFlag: hideFlag,
        id: o
      },
      callback: (e, total) => {
        fetchData()
      },
    });
  }
  const getColumns = [
    {
      title: '当前阶段',
      dataIndex: 'stageInfo',
      onCell: (record, rowIndex) => {
        const { stageInfo = {} } = record
        const { stageName, stageColor } = stageInfo
        return {
          style: { background: hexToRGBA(stageColor, 0.1), width: 140 }
        };
      },
      render: (e = {}) => {
        const { stageName, stageColor } = e
        return <div style={{ color: stageColor }}>{stageName}</div> || '--'
      }
    },
    // {
    //   title: '上一阶段',
    //   dataIndex: 'name',

    // },
    // {
    //   title: '上一阶段跟进人',
    //   dataIndex: 'preStageAdminName',

    // },
    {
      title: '流转时间',
      dataIndex: 'createTime',

    },
    {
      title: '流转类型',
      dataIndex: 'flowType',
      render: (e) => {
        return e === 'admin' ? '手动流转' : '自动流转'
      }
    },
    {
      title: '员工姓名',
      dataIndex: 'username',

    },
    {
      title: '当前阶段达标状态',
      dataIndex: 'adminFinishStatus',
      render: (e) => {
        const { status } = e
        if (status === '-1') {
          return '--'
        } else if (status === '1') {
          if (e === '1') {
            return <div style={{ color: "rgba(9, 191, 85, 1)" }
            } > 已完成</div >
          }
          return '--'
        }
        else {
          if (e === '1') {
            return <div style={{ color: "rgba(9, 191, 85, 1)" }
            } > 已完成</div >
          }
          else {
            return <div style={{ color: "rgba(255, 64, 85, 1)" }}>未完成</div>
          }
        }
      }
    },
    {
      title: '当前阶段流转状态',
      dataIndex: 'status',
      render: (e) => {
        if (e === '-1') {
          return <div style={{ color: "rgba(255, 64, 85, 1)" }}>未进入</div>
        } else if (e === '0') {
          return <div style={{ color: "rgba(255, 64, 85, 1)" }}>未完成</div>
        }
        else if (e === '1') {
          return <div style={{ color: "rgba(35, 99, 245, 1)" }}>进行中</div>
        } else if (e === '2') {
          return <div style={{ color: "rgba(9, 191, 85, 1)" }}>已完成</div>
        }
      }
    },
    // {
    //   title: '上一阶段流转状态',
    //   dataIndex: 'name',
    //   render: (e) => {
    //     if (e === '-1') {
    //       return <div style={{ color: "rgba(255, 64, 85, 1)" }}>未进入</div>
    //     } else if (e === '0') {
    //       return <div style={{ color: "rgba(255, 64, 85, 1)" }}>未完成</div>
    //     }
    //     else if (e === '1') {
    //       return <div style={{ color: "rgba(35, 99, 245, 1)" }}>进行中</div>
    //     } else if (e === '2') {
    //       return <div style={{ color: "rgba(9, 191, 85, 1)" }}>已完成</div>
    //     }
    //   }
    // },



  ]

  return (
    <TableDataBlock
      noCard={false}
      columns={getColumns}
      list={list}
      pagination={false}></TableDataBlock>
    // <Timeline direction="vertical">{filterList(list)}</Timeline>
  );
};

export default connect(({ loading }) => ({
  loading: loading.effects['subscriber/fetchListAllUserStage'],
}))(SetForm);
